<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!--  
	.stop - 调用 event.stopPropagation()。
  .prevent - 调用 event.preventDefault()。
  .once - 只触发一次回调。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .capture - 添加事件侦听器时使用 capture(捕获)模式。
  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  .native - 监听组件根元素的原生事件。
  .left - (2.2.0) 只当点击鼠标左键时触发。
  .right - (2.2.0) 只当点击鼠标右键时触发。
  .middle - (2.2.0) 只当点击鼠标中键时触发。
  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器，默认行为立即只执行侦听器，不堵塞
	-->

<div id="app">
  <div class="inner" @click.capture.self="click">
    <!-- 阻止冒泡 -->
    <input type="button" id="btn" value="冒泡" @click.stop="clickStop" />
    <!-- 捕获-->
    <input type="button" id="btn" value="捕获" @click="clickCapture" />
    <!-- self 平时也能阻止事件冒泡-->
    <input type="button" id="btn" value="self" @click="clickSelf" />
  </div>
  <!-- 阻止默认事件 -->
  <a href="https://www.baidu.com" @click.prevent="clickPrevent">百度</a>
  <!-- passive 默认行为立即只执行侦听器，不堵塞-->
  <ul @wheel.passive="clickPassive"
    style="height: 80px;width: 200px;background-color: antiquewhite;overflow-y: scroll;">
    <li>@wheel.passive</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul @scroll="clickPassive" style="height: 80px;width: 200px;background-color: antiquewhite;overflow-y: scroll;">
    <li>@scroll</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <input type="text" placeholder='@keyup.enter="console.log($event)"' @keyup.enter="console.log($event)"
    style="width: 300px;display: block;margin-bottom: 20px;">
  <input type="text" placeholder='@keydown.Tab="console.log($event)"' @keydown.Tab="console.log($event)"
    style="width: 300px;display: block;margin-bottom: 20px;">
  <input type="text" placeholder='@keydown="console.log($event)"' @keydown="console.log($event)"
    style="width: 300px;display: block;margin-bottom: 20px;">
</div>


<script type="text/javascript">
  // Vue.config.keyCodes.f1 = 112
  var ve = new Vue({
    el: '#app',
    data: {},
    methods: {
      click() {
        console.log("触发了最外层");
      },
      clickStop() {
        console.log("阻止冒泡")
      },
      clickCapture() {
        console.log("捕获")
      },
      clickSelf() {
        console.log("self")
      },
      clickPrevent() {
        console.log("阻止默认事件")
      },
      clickPassive() {
        for (let i = 0; i < 1000; i++) {
          console.log("# main线程 堵塞一下")
        }
      },
    },

  })

</script>

<style type="text/css">
  .inner {
    width: 100%;
    height: 300px;
    background-color: pink;
  }

</style>
